<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互效果</title>
    <link rel="stylesheet" href="./lib/swiper.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 minimum-scale=1.0">
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        .swiper-container {
            height: 100%;
        }
        .swiper-slide {
            font-size: 100px;
            border: 10px solid hotpink;
            box-sizing: border-box;
        }
        .loadding {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 2;
            background-color: skyblue;
        }
        .welcome {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 1;
            background-color: lightsteelblue;
        }
    </style>
</head>
<body>    
    
    <!-- 切换主页面的 swiper 实现 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">3</div>
            <div class="swiper-slide">4</div>
            <div class="swiper-slide">5</div>
            <div class="swiper-slide">6</div>
            <div class="swiper-slide">7</div>
        </div>
    </div>
    <!-- laodding 页面 -->
    <div class="loadding"></div>
    <!-- 欢迎页面 -->
    <div class="welcome"></div>
</body>
</html>

<!-- 导入 swiper的js -->
<script type="text/javascript" src="lib/swiper.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->


<!-- 导入 zepto 使用zepto 来实现 dom元素操纵 -->
<script type="text/javascript" src="lib/zepto.js"></script>
<script type="text/javascript" src="lib/event.js"></script>
<script type="text/javascript" src="lib/fx.js"></script>
<script type="text/javascript" src="lib/touch.js"></script>
<!-- fadein toggle等 动画方法的模块 -->
<script type="text/javascript" src="lib/fx_methods.js"></script>


<script>
    var swiper = new Swiper('.swiper-container', {
        direction : 'vertical',
    });

    // 点击消失
    $(".loadding").click(function(e) {
        $(this).fadeOut();
    });
    $(".welcome").click(function(e) {
        $(this).fadeOut();
    });
</script>